<template>
  <!-- #ifdef MP-ALIPAY || MP-WEIXIN -->
  <basePage :page-params="pageParams" :show-tabbar="true">
    <view v-if="showSeach" class="userview"><image :src="vuex_imgPath+'/xfs-user-bg.png'" /></view>
    <view class="shopIndex">
      <!--`whitesmoke`-->
      <navBar :custom-els="customEls" :bg-color="bgColor" :now-address="nowAddress" />
      <view v-if="showSeach" class="top center" :style="{top: navHeight + 'px'}">
        <view class="customer center" @click="goCustomer">
          <text class="font_family icon-earphone_tongyong_1" />
        </view>
        <view class="search_wrap" @click="goShopSeach">
          <view />
          <input placeholder="请输入商品名称、条形码或编码" :disabled="true" disabledColor="#ffffff">
          <image src="../static/image/icon_search.png" />
          <view class="scan_icon" @click.stop="handleScan">
            <u-icon size="28px" name="scan" />
          </view>
        </view>
      </view>

      <view v-if="bannerTop.length > 0" class="banner">
        <u-swiper
          v-if="bannerTop.length > 0"
          height="280rpx"
          radius="16rpx"
          :list="bannerTop"
          bg-color="#ffffff"
          :indicator="true"
          indicator-inactive-color="rgba(255,255,255,0.5)"
          indicator-active-color="rgba(255,255,255,1)"
          indicator-mode="dot"
          @click="hrefActiviy"
        />
        <view v-else class="banner_wrap">
          <image :src="bannerTop[0]" />
        </view>
      </view>
      <view class="category">
        <u-scroll-list indicator-active-color="#222222">
          <view v-for="(lengthItem, lengthIndex) in categoryLengthList" :key="lengthIndex">
            <view>
              <view class="scroll-list">
                <!-- <view
                  v-for="(item, index) in categoryList"
                  :key="index"
                  class="scroll-list__line"
                > -->
                <view
                  v-for="(item, index) in categoryList[lengthIndex]"
                  :key="index"
                  class="scroll-list__line"
                >
                  <view
                    v-for="(result, resultIndex) in item"
                    :key="resultIndex"
                    class="scroll-list__line__item cateSmall"
                    @click="goodsGroup(result)"
                  >
                    <view> <image :src="result.pictureUrl" :class="result.type == 'all' ? 'small' : ''" /> </view>
                    <text class="scroll-list__line__item__text">{{ result.displayContent }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </u-scroll-list>
      </view>
      <view v-if="resouceA.length > 0" class="titleBanner">
        <u-swiper
          height="196rpx"
          radius="8rpx"
          :list="resouceA"
          bg-color="#ffffff"
          key-name="picUrl"
          :indicator="true"
          indicator-mode="dot"
          indicator-inactive-color="#E8E8E8"
          indicator-active-color="#C2C2C2"
          @click="resouceFn($event, 'a')"
        />
      </view>

      <view v-if="resouceLeft.length > 0 && resouceRight.length > 0" class="recomSwiper">
        <view>
          <p>{{ activityResourceLeftTitle }}</p>
          <u-swiper
            height="196rpx"
            radius="0rpx"
            bg-color="#ffffff"
            :list="resouceLeft"
            key-name="picUrl"
            :indicator="true"
            indicator-inactive-color="#E8E8E8"
            indicator-active-color="#C2C2C2"
            indicator-mode="dot"
            @click="resouceFn($event, 'left')"
          />
        </view>
        <view>
          <p>{{ activityResourceRightTitle }}</p>
          <u-swiper
            height="196rpx"
            bg-color="#ffffff"
            radius="0rpx"
            :list="resouceRight"
            key-name="picUrl"
            :indicator="true"
            indicator-inactive-color="#E8E8E8"
            indicator-active-color="#C2C2C2"
            indicator-mode="dot"
            @click="resouceFn($event, 'right')"
          />
        </view>
      </view>
      <view v-if="productPromotionList.length > 0" class="special">
        <view class="title">
          特价促销
          <text class="font_family icon-damuzhi_tongyong_1" />
        </view>
        <view class="speShop">
          <view v-for="(item, index) in productPromotionList" :key="index" class="someStyle" @click="goShopDetail(item)">
            <specialShop :shop-info="item" type="offer" />
          </view>
        </view>
      </view>
      <view v-if="newProductsList && newProductsList.length > 0" class="newShop">
        <view class="title">
          新品速递
          <image src="../static/image/index/new.png" />
        </view>
        <view class="speShop">
          <view v-for="(item, index) in newProductsList" :key="index" class="someStyle" @click="goShopDetail(item)">
            <specialShop :shop-info="item" type="new" />
          </view>
        </view>
      </view>
      <view v-if="resouceB.length > 0" class="bannerTile">
        <u-swiper
          height="176rpx"
          radius="8rpx"
          :list="resouceB"
          key-name="picUrl"
          :indicator="true"
          indicator-inactive-color="#E8E8E8"
          indicator-active-color="#C2C2C2"
          indicator-mode="dot"
          @click="resouceFn($event, 'b')"
        />
      </view>
      <view class="getTopFalse">
        <TopTabs
          class="getTop"
          :ceiling="ceiling"
          :bg-color="'whitesmoke'"
          :list-data="floorContentVo"
          key-name="name"
          :line-color-obj="lineColorObj"
          :top-nav-height="TopNavHeight"
          @tabClick="tabClick"
        />
      </view>
      <view :style="'min-height:' + 'calc(100vh - ' + navHeight + 'px - 200rpx)' ">
        <view class="allShop" :style="{'height' : shopHeight}">
          <view v-for="(item, index) in cateListShop" :key="index" class="smallShop" @click="goShopDetail(item)">
            <view class="shopImg">
              <image :src="item.imgUrl" />
            </view>
            <view class="shopName">{{ item.skuName }}</view>
            <view class="price_row">
              <view class="shopPrice">
                <view>￥</view>
                <span>{{ item.integer }}/{{ item.unit }}</span>
              </view>
              <view class="shop_cart" @click.stop="handleAddShopping(item)">
                <img src="/static/image/shopping_cart.png" alt="添加购物车">
              </view>
            </view>
            <view class="recommend_note">{{ item.recommendPhrases }}</view>
          </view>
        </view>
      </view>
      <text v-if="showToppting" class="font_family topping icon-Top_tongyong_1" @click="gotop()" />
    </view>
    <!-- 规格选择popup - 相关变量和方法均在addShoppingCartMixin混入中 -->
    <SelectSpecPopup
      callback-url="/pages/index/index"
      :speci-show.sync="speciPopup.show"
      :shop-num.sync="speciPopup.purchaseNum"
      :default-shop-num.sync="speciPopup.minOrderNum"
      :order-limit-type.sync="speciPopup.orderLimitType"
      :detail-info="speciPopup.details"
      :new-sku-infos="speciPopup.skuInfo"
      :sale-flag="speciPopup.isNotSale"
      @addShopCar="addPurchaseOrder"
      @buy="purchaseNow"
      @changeSpeci="changeSpecSelect"
    />
    <web-view v-if="webSrc" :src="webSrc" />
    <u-overlay :show="overlay.show" @click="handleCloseOverlay">
      <view class="overlay-warp">
        <image class="overlay-img" :src="overlay.list[0].picUrl" @click.stop="$u.throttle(handleClickOverlay)" />
        <view class="overlay-close" @click.stop="handleCloseOverlay">&#xe639;</view>
        <!-- <view @click.stop="handleClickOverlay">
          <image :src="overlay.list[0].picUrl" />
        </view> -->
      </view>
    </u-overlay>
  </basePage>
  <!--  #endif -->
</template>

<script>
import specialShop from './specialShop';
import TopTabs from '@/components/top-tabs';
import navBar from '@/components/navBar';
import { getNavHeight, tdkUrl } from '@/common/common';
import { getBanner, getShop, getCategory, getCategoryShop, getResource, moveBulletListPage, getBatchCouponForBind } from '@/api/shopIndex';
import { getAddress, getDiffCity, getWare } from '@/api/commonApi';
import basePage from '@/components/base-page'
import { imageBase } from './base'
import SelectSpecPopup from '@/components/select-spec-popup/index'
import addShoppingCartMixin from '@/shopDetail/addShoppingCartMixin'
import qs from '@/lib/qs'

export default {
  components: {
    specialShop,
    TopTabs,
    navBar,
    basePage,
    SelectSpecPopup
  },
  mixins: [addShoppingCartMixin],
  data() {
    return {
      shopHeight: 'auto',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      goodsBaseUrl: 'https://cdn.uviewui.com/uview/goods/',
      menuBaseUrl: 'https://cdn.uviewui.com/uview/menu/',
      bannerTop: [],
      categoryList: [], // 分类入口
      categoryLengthList: [],
      cateListShop: [], // 楼层商品
      productPromotionList: [], // 特价促销
      newProductsList: [], // 新品速递
      floorContentVo: [],
      ceiling: false,
      lineColorObj: {
        bgUrl: `url('${imageBase}') no-repeat center 14rpx /36rpx 16rpx`,
        width: '36',
        height: '16'
      },
      TopHeight: 0,
      navHeight: 0,
      TopNavHeight: 0,
      customEls: ['location'],
      showSeach: true,
      resouceA: [],
      resouceB: [],
      resouceLeft: [],
      resouceRight: [],
      nowAddress: '',
      activityResourceRightTitle: '',
      activityResourceLeftTitle: '',
      platformType: '',
      activityPerson: '',
      bgColor: 'transparent',
      bannerTopAll: [],
      showToppting: false,
      activityId: '',
      webSrc: '',
      overlay: {
        show: false,
        list: []
      }
    }
  },
  onPageScroll(e) {
    e.scrollTop > 600 ? this.showToppting = true : this.showToppting = false
    if (e.scrollTop > uni.upx2px(75)) {
      this.showSeach = false
      this.bgColor = 'whitesmoke'
      this.customEls = ['searchIndex']
    } else {
      this.showSeach = true
      this.bgColor = 'transparent'
      this.customEls = ['location']
    }
    uni.createSelectorQuery().select('.getTopFalse').boundingClientRect(data => {
      if (data.top <= this.TopHeight) {
        this.ceiling = true
        this.TopNavHeight = this.TopHeight
      } else {
        this.ceiling = false
      }
    }).exec();
  },
  onShow() {
    // #ifdef MP-ALIPAY
    my.hideBackHome();
    // #endif
    let params = {}
    if (this.vuex_nowAddress) { // 如果已经授权过并且有了地址信息（地址变更后每次都需要重新调用接口）
      this.nowAddress = this.vuex_nowAddress
      params = { name: this.nowAddress.name, level: 102 } // 需更新仓数据
      console.log('地址信息',this.nowAddress.name)
      this.getCityInfo(params)
      this.getBanner()
      this.getShop()
      this.getCategory()
      this.getResource()
    } else { // 已经授权过的用户，但是本地没有储存信息，默认为北京
      params = { name: '北京市', level: 102 }
      this.getCityInfo(params)
    }
    this.getMoveBulletList()
  },
  created() {
    this.getPlat()
    // #ifdef H5
    this.navHeight = 48
    this.TopHeight = 44
    // #endif
    // #ifdef MP-WEIXIN
    this.navHeight = getNavHeight() + 4
    this.TopHeight = getNavHeight()
    // #endif
    // #ifdef MP-ALIPAY
    this.navHeight = uni.getSystemInfoSync().statusBarHeight + 44
    this.TopHeight = getNavHeight()
    // #endif
    if (!this.vuex_nowAddress) { // 没有本地信息，则提示授权
      uni.getSetting({
        success: (res) => {
          if (!res.authSetting['scope.userLocation']) {
            this.getLocation()
          }
        }
      })
    }
    console.log('搜索高', this.navHeight)
  },
  onLoad(option) {
    // #ifdef H5
    window.location.href = tdkUrl.develop
    uni.setNavigationBarTitle({
      title: ' ',
      success: () => {},
      fail: () => {},
      complete: () => {},
    })
    // #endif

    // #ifdef MP-ALIPAY || MP-WEIXIN
    const {
      branchId,
      branchName
    } = option
    if (!this.vuex_sharePushmanCompanyInfo || Object.keys(this.vuex_sharePushmanCompanyInfo).length == 0) {
      this.$u.vuex('vuex_sharePushmanCompanyInfo', { branchId, branchName })
    }
    // #endif
  },
  onShareAppMessage(res) {
    if (res.from === 'button') { // 来自页面内分享按钮
      console.log(res.target)
    }
    const { companyName = '', pushmanCompanyId = '' } = this.vuex_memberInfo
    return {
      title: '随时随地一站式采购，订单状态、物流跟踪一手掌握！',
      imageUrl: `${this.vuex_imgPath}/share_index_icon.png`,
      path: `/shopIndex/shopIndex?fromCard=${true}&branchId=${pushmanCompanyId}&branchName=${companyName}`
    }
  },
  methods: {
    gotop() {
      uni.pageScrollTo({
        duration: 500,
        scrollTop: 0
      })
    },
    hrefActiviy(e) {
      // this.activityId = this.getQueryVariable(this.bannerTopAll[e].placeContent, 'activityId')
      // uni.navigateTo({
      //   url: `/customer/activityPage?activityId=${this.activityId}`
      // })
      console.log('点击首页轮播')
      this.swiperLinkExecutor(this.bannerTopAll[e])
    },
    goCustomer() {
      if (!this.vuex_loginStatus) {
        const callbackUrl = '/shopIndex/shopIndex'
        uni.navigateTo({
          url: `/login/login/codeLogin?callbackUrl=${callbackUrl}`
        })
      } else {
        uni.navigateTo({ url: '/customer/index' })
      }
    },
    getPlat() {
      const { accountType = 20 } = this.vuex_memberInfo || {}
      switch (accountType) { //  账户类型：10:签约用户；20:普通用户;30认证用户;39普通会员-分销;40分销用户；
        case 10:
          this.platformType = 10
          break
        case 20:
          this.platformType = 20
          break
        case 30:
          this.platformType = 20
          break
        case 39:
          this.platformType = 30
          break
        case 40:
          this.platformType = 30
          break
        default:
          this.platformType = 20
          break
      }
    },
    resouceFn(e, type) {
      var picJumpPath = ''
      if (type == 'a') {
        picJumpPath = this.resouceA[e].picJumpPath
      } else if (type == 'b') {
        picJumpPath = this.resouceB[e].picJumpPath
      } else if (type == 'left') {
        picJumpPath = this.resouceLeft[e].picJumpPath
      } else {
        picJumpPath = this.resouceRight[e].picJumpPath
      }
      var params = picJumpPath ? JSON.parse(picJumpPath) : ''
      this.bannerHref(params)
    },
    bannerHref(e) {
      console.log('资源位跳转')
      const { param1 = '', param2 = '', param3 = '' } = e.jumpVar || {}
      const callbackUrl = '/shopIndex/shopIndex'
      switch (e.jumpType) {
        case 1:
          uni.redirectTo({ url: '/shopIndex/shopIndex' })
          break;
        case 2:
          uni.navigateTo({ url: `/customer/activityPage?url=${this.vuex_baseURL.webUrl}${param1}` }) //活动页
          break;
        case 3:
          uni.navigateTo({ url: `/customer/topicTemplate?subId=${param1}&detailContent =${param2}` }) //专题
          break;
        case 4:
          uni.navigateTo({ url: `/shopDetail/index?spuCode=${param2}&skuCode=${param1}` })
          break;
        case 5:
          uni.navigateTo({ url: `/productList/productList/index?queryString=${param1}&title=${param1}&` })
          break;
        case 6:
          if (!this.vuex_loginStatus) {
            uni.navigateTo({
              url: `/login/login/codeLogin?callbackUrl=${callbackUrl}`
            })
          } else {
            this.getBatchCouponForBindFn(param1)
            //uni.navigateTo({ url: `/customer/custcoupon?couponId=${param1}` }) //我的优惠券
          }
          break;
        case 7:
          uni.navigateTo({ url: `myAccount/pointsMall/pointsGoodsDetail?skuId=${param1}` }) //积分商品详情
          break;
        case 8:
          uni.navigateTo({ url: `/orders/moreOrderDetail/index?id=${param1}` }) //订单详情
          break;
        case 12:
          if (!this.vuex_loginStatus) {
            uni.navigateTo({
              url: `/login/login/codeLogin?callbackUrl=${callbackUrl}`
            })
          } else {
            uni.redirectTo({ url: '/purchaseOrder/index' }) //购物车
          }
          break;
        case 13:
          uni.navigateTo({ url: '/myAccount/pointsMall/index' }) //积分商城
          break;

        case 14:
          uni.navigateTo({ url: '/customer/index' }) //客服
          break;
        case 15:
          uni.navigateTo({ url: '/pages/myAccount/index' }) //个人中心
          break;
        case 16:
          uni.navigateTo({ url: `/productList/productList/index?brandId=${param1}` })
          break;
        case 17:
          uni.navigateTo({ url: `/productList/productList/index?categoryId=${param1}&categoryLevel=${param2}` })
          break;
        case 19:
          uni.navigateTo({ url: `/orders/moreOrderDetail/index?id=${param1}` }) //订单详情
          break;
        case 23:
          uni.navigateTo({ url: `/myAccount/coupon/index` }) //我的优惠券列表
          break;
        case 24:
          uni.navigateTo({ url: `/productList/productList/index?title=${param3}&sceneId=${param1}&pageType=scene` }) //场景商品列表
          break;
        case 25:
          uni.navigateTo({ url: `/pages/order/moreOrder` }) //我的订单列表
          break;
      }
    },
    goShopSeach() { //首页获取焦点后跳转
      uni.navigateTo({ url: '/search/index' })
    },
    goodsGroup(e) {
      if (e.type == 'all') {
        uni.redirectTo({ url: '/goodsGroup/goodsGroup/index' })
      } else {
        const { relationFirstLevelObject } = e
        uni.navigateTo({
          url: `/productList/productList/index?categoryId=${relationFirstLevelObject[0].frontCategoryId}&categoryLevel=1&title=${relationFirstLevelObject[0].fristCategoryName}`
        })
      }
    },
    // 领取优惠券
    getBatchCouponForBindFn(codes) {
      const { customerId, memberId, accountType } = this.vuex_memberInfo
      const topicCodeList = codes.split(',')
      const dataParam = {
        memberId: memberId,
        topicCodeList: topicCodeList,
        accountType: accountType,
        devicePlatform: 'ios',
        customerId: customerId
      }
      getBatchCouponForBind(dataParam).then((res) => {
        if (res.code == 0) {
          this.$u.toast(res.msg);
        } else {
          this.$u.toast(res.msg);
        }
      })
    },
    getLocation() { // 初次获取定位
      uni.getLocation({
        type: 'wgs84',
        success: (res) => {
          this.getAddress(res.latitude, res.longitude) // 经纬度获取定位信息
        },
        fail: () => {
          this.$u.toast('拒绝授权');
          const params = {
            name: '北京市',
            level: 102
          }
          this.getCityInfo(params)
        }
      });
    },
    getAddress(lat, lng) { // 获取地址信息
      const params = { lat, lng }
      getAddress(params).then((res) => {
        uni.$u.vuex('vuex_mapAddress', res.data);
        this.mapAddress = res.data
        const { districtName, cityName } = res.data
        if (res.errorCode == 0) {
          this.getDiffCity(districtName, cityName)
        }
      })
    },
    getDiffCity(districtName, cityName) { // 获取特殊城市
      const params = { type: 10 }
      getDiffCity(params).then((res) => {
        if (res.errorCode == 0) {
          this.diffCityList = res.data
          // 特殊城市展示三级、不是特殊城市展示二级
          this.Address = res.data.includes(cityName) ? districtName : cityName
          const params = {
            name: this.Address,
            level: res.data.includes(cityName) ? 103 : 102
          }
          this.getCityInfo(params)
        }
      })
    },
    getCityInfo(params) { // 根据name 和 level 获取某个地区的详细数据
      getWare(params).then((res) => {
        if (res.errorCode == 0) {
          this.nowAddress = res.data
          var cityParams = {}
          const { grandpa_code, grandpa_name, parent_name, parent_code, name, code, warehouse_code, level } = res.data
          if (level == 102) {
            cityParams = {
              provinceCode: parent_code,
              provinceName: parent_name,
              cityCode: code,
              cityName: name,
              areaCode: '',
              areaName: '',
              warehouseCode: warehouse_code
            }
          } else if (level == 103) {
            cityParams = {
              provinceCode: grandpa_code,
              provinceName: grandpa_name,
              cityCode: parent_code,
              cityName: parent_name,
              areaCode: code,
              areaName: name,
              warehouseCode: warehouse_code
            }
          }
          uni.$u.vuex('vuex_nowAddress', res.data); // TODO 进入首页后获取位置授权，需要保存北京市的城市数据
          uni.$u.vuex('vuex_cityInfo', cityParams);
          this.getBanner()
          this.getShop()
          this.getCategory()
          this.getResource()
        }
      })
    },
    tabClick(e) {
      this.shopHeight = '0px'
      // uni.pageScrollTo({ scrollTop: this.navHeightDefault, duration: 0 });
      this.getCategoryShop(e.keyName)
    },
    getBanner() { // 首页轮播图
      console.log(this.platformType)
      const { mainCustomerId = '' } = this.vuex_memberInfo || {}
      const { warehouse_code } = this.vuex_nowAddress
      const params = {
        mainCustomerId,
        areaList: [warehouse_code],
        source: 10,
        platform: this.platformType,
        showPort: 20, //* 0 全部 10 app 20 小程序 30 m站

      }
      getBanner(params).then((res) => {
        if (res.errorCode == 0 && !!res.data) {
          this.bannerTop = res.data.data.map((item) => item.picUrl)
          this.bannerTopAll = res.data.data
        }
      })
    },
    getCategory() { // 分类入口
      const { warehouse_code } = this.vuex_nowAddress
      const params = {
        source: 20,
        platform: this.platformType,
        warehouse: warehouse_code
      }
      getCategory(params).then((res) => {
        if (res.data) {
          var a = res.data.splice(0, 10)
          var b = res.data.splice(0, 9)
          var all = { pictureUrl: '../static/image/index/all.png', displayContent: '全部', type: 'all' }
          b.push(all)
          var arr = [...[a], ...[b]]
          // this.categoryList = arr
          this.categoryList = arr.map(item => {
            const perRows = 5 // 当前每行数量
            const rowList = [item.slice(0, perRows), item.slice(perRows, 10)]
            return rowList
          })
          this.categoryLengthList = Array.from({ length: 2 }, (value, key) => key + 1)
        }
      })
    },
    getResource() { // 资源位
      const { warehouse_code } = this.vuex_nowAddress
      const params = {
        status: 1,
        categoryLocation: '10,20,30,40',
        platform: this.platformType,
        port: 20,
        warehouseCode: warehouse_code,
      }
      getResource(params).then((res) => {
        if (res.code == '0') {
          const { bannerResourceA = [], bannerResourceB = [],
            activityResourceLeft = [], activityResourceRight = [], activityResourceRightTitle, activityResourceLeftTitle } = res.data
          this.resouceA = bannerResourceA
          this.resouceB = bannerResourceB
          this.resouceLeft = activityResourceLeft
          this.resouceRight = activityResourceRight
          this.activityResourceRightTitle = activityResourceRightTitle || '热门活动'
          this.activityResourceLeftTitle = activityResourceLeftTitle || '热门活动'
          setTimeout(() => { // 获取元素距离顶部距离
            uni.createSelectorQuery().select('.getTopFalse').boundingClientRect(data => {
              this.navHeightDefault = data.top - 75
            }).exec();
          }, 1000)
        }
      })
    },
    getShop() {
      var merberInfo = (!!this.vuex_crmCustomerInfos && this.vuex_crmCustomerInfos.length > 0) ? this.vuex_crmCustomerInfos[0] : {}
      const { accountType = 20, mainCustomerId = '' } = this.vuex_memberInfo || {}
      const { customerId = '', customerCode } = merberInfo
      const { warehouse_code } = this.vuex_nowAddress
      const params = {
        account_type: accountType,
        memberId: 20,
        customerId,
        customerCode,
        warehouseId: warehouse_code,
        platform: this.platformType,
        floorId: '',
        mainCustomerId
      }
      getShop(params).then((res) => {
        if (res.errorCode == 0) {
          this.floorContentVo = res.data?.floorContentVo?.map((item) => ({ name: item.floorName, keyName: item.floorId }))
          this.newProductsList = res.data?.newProductsList?.map((item) => {
            item.price = Number(item.price).toFixed(2) ? Number(item.price).toFixed(2) : '0.00'
            var priceSplit = item.price
            return { ...item, integer: priceSplit }
          })
          this.productPromotionList = res.data?.productPromotionList?.map((item) => {
            item.price = Number(item.price).toFixed(2) ? Number(item.price).toFixed(2) : '0.00'
            var priceSplit = item.price
            return { ...item, integer: priceSplit }
          })
          this.cateListShop = res.data?.floorContentVo[0]?.floorProductList?.map((item) => {
            item.price = Number(item.price).toFixed(2) ? Number(item.price).toFixed(2) : '0.00'
            var priceSplit = item.price
            return { ...item, integer: priceSplit }
          })
        }
      })
    },
    getCategoryShop(e) {
      this.cateListShop = []
      var merberInfo = (!!this.vuex_crmCustomerInfos && this.vuex_crmCustomerInfos.length > 0) ? this.vuex_crmCustomerInfos[0] : {}
      const { accountType = 20, mainCustomerId = '', memberId } = this.vuex_memberInfo || {}
      const { customerId = '', customerCode } = merberInfo
      const { warehouse_code } = this.vuex_nowAddress
      const params = {
        accountType,
        memberId,
        customerId,
        customerCode,
        warehouseId: warehouse_code,
        platform: this.platformType,
        floorId: e,
        mainCustomerId: mainCustomerId,
      }
      getCategoryShop(params).then((res) => {
        if (res.errorCode == 0 && !!res.data) {
          const { floorContentVo = [] } = res.data
          if (floorContentVo.length > 0 && !!floorContentVo[0].floorProductList) {
            this.cateListShop = floorContentVo[0].floorProductList?.map((item) => {
              item.price = Number(item.price).toFixed(2) ? Number(item.price).toFixed(2) : '0.00'
              var priceSplit = item.price
              return { ...item, integer: priceSplit }
            })
          } else {
            this.cateListShop = []
          }
          this.shopHeight = 'auto'
        } else {
          this.cateListShop = []
        }
      })
    },
    goShopDetail(item) {
      uni.navigateTo({
        url: '/shopDetail/index?spuCode=' + item.spuCode + '&skuCode=' + item.skuCode
      })
    },
    getQueryVariable(url, variable) {
      var query = url.split('?')[1];
      var vars = query.split('&')
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split('=');
        if (pair[0] == variable) return pair[1];
      }
      return (false)
    },
    // 扫码
    handleScan() {
      uni.scanCode({
        scanType: 'qrCode',
        success: this.scanSuccessExecutor
      })
    },
    // 扫码成功执行回调
    scanSuccessExecutor(res) {
      const validateRegs = [
        { reg: /(productspu)/g, matchList: ['productspu'], executor: this.executePriceTagScan },
        { reg: /linkApp|spuCode/g, matchList: ['linkApp', 'spuCode'], executor: this.executeScreenDetailScan },
        { reg: /linkApp|orderId/g, matchList: ['linkApp', 'orderId'], executor: this.executeScreenOrderScan },
        { reg: /(\/id=)/g, matchList: ['/id='], executor: this.executeHHOrderScan }
      ]
      const scanDetail = validateRegs.find(item => {
        const matchResult = res.result.match(item.reg)
        if (!matchResult) return false
        const matchState = item.matchList.every(res => matchResult.includes(res))
        return matchState
      })
      if (scanDetail) {
        scanDetail.executor(res.result)
      } else {
        this.$u.toast('没有扫描到相关信息')
      }
    },
    // 执行电子价签扫码结果
    executePriceTagScan(url) {
      if (!url) return
      const codeSuffix = url.split('/').pop() // 含有code编码的后缀html字符串
      const spuCode = codeSuffix.split('.')[0]
      uni.navigateTo({
        url: `/shopDetail/index?spuCode=${spuCode}`
      })
    },
    // 执行智慧屏详情扫码结果
    executeScreenDetailScan(url) {
      if (!url) return
      const params = url.split('?').pop()
      const { spuCode } = qs.parse(params) ?? {}
      uni.navigateTo({
        url: `/shopDetail/index?spuCode=${spuCode}`
      })
    },
    // 执行智慧屏订单支付扫码结果
    executeScreenOrderScan(url) {
      if (!url) return
      const params = url.split('?').pop()
      const { orderId } = qs.parse(params) ?? {}
      uni.navigateTo({
        url: `/ycPayments/confirmOrders/index?orderId=${orderId}`
      })
    },
    // 执行鸿鹄订单二维码扫描结果
    executeHHOrderScan(url) {
      if (!url) return
      const orderNo = url.split('id=').pop()
      uni.navigateTo({
        url: `/payments/payment/payment?orderNo=${orderNo}&pageSource=local`
      })
    },
    // 未登录跳转登录
    returnLoginFn(url, params) {
      const callbackUrl = url
      const urlParams = JSON.stringify(params)
      uni.redirectTo({
        url: `/login/login/codeLogin?callbackUrl=${callbackUrl}&urlParams=${urlParams}`
      })
    },
    // 轮播图跳转
    swiperLinkExecutor(data, type) {
      console.log('弹框跳转 轮播 77', data)
      const { placeType, placeContent = '', detailContent } = data
      let Level = 1
      let title = ''
      if (placeType == 2) {
        Level = (data.detailContent).split(',').length
      }
      if (placeType == 24) {
        title = data.detailContent
      }
      let spucodeList = []
      const productName = '商品集合'
      if (placeType == 6) {
        spucodeList = []
        JSON.parse(placeContent).forEach((item) => {
          spucodeList.push(item.productCode)
        })
      }
      if (type && type == 'tankuang' && placeType == 8) { //弹框无跳转的时候关闭当前弹框
        this.handleCloseOverlay()
      }
      if (placeType == 7) { // 优惠券-领劵页
        this.getBatchCouponForBindFn(placeContent)
      }
      const pathValMaps = {
        1: { //专题
          url: `/customer/topicTemplate?subId=${placeContent}&detailContent=${detailContent}`
        },
        2: { // 分类商品列表
          // url: `/goodsGroup/goodsGroup/index?tabVal=${0}`
          url: `/productList/productList/index?&categoryId=${placeContent}&categoryLevel=${Level}&pageType=category`,
        },
        3: { // 品牌商品列表
          // url: `/goodsGroup/goodsGroup/index?tabVal=${1}`
          url: `/productList/productList/index?&brandId=${placeContent}&pageType=brand`,
        },
        4: { // 商品详情
          url: `/shopDetail/index?spuCode=${placeContent}`
        },
        5: { // 自定义URL
          src: placeContent
        },
        6: { // 商品集合 跳转搜索结果
          url: `/productList/productList/index?jump=1&title=${productName}&spuCodes=${spucodeList.toString()}`
        },
        // 7: { // 优惠券-领劵页
        //   url: `/customer/custcoupon?couponId=${placeContent}`
        // },
        // 8: { // 无跳转

        // },
        9: { // 积分商品列表
          url: '/myAccount/pointsMall/index'
        },
        10: { //首单优惠 目前没有做 暂时不放开跳转
          //url: ``
        },
        11: { // 搜索结果
          url: `/productList/productList/index?title=${placeContent}&queryString=${placeContent}`
        },
        12: { // 购物车
          url: '/purchaseOrder/index'
        },
        13: { // 在线客服
          url: '/customer/index'
        },
        14: { // 个人中心
          url: '/pages/myAccount/index'
        },
        15: { // 首页
          url: '/shopIndex/shopIndex'
        },
        16: { // 积分商品详情
          url: `/myAccount/pointsMall/pointsGoodsDetail?skuId=${placeContent}`
        },
        23: { //我的优惠券列表
          url: `/myAccount/coupon/index`
        },
        24: { //场景商品列表
          url: `/productList/productList/index?title=${title}&sceneId=${placeContent}&pageType=scene`,
        },
        25: { //我的订单列表
          url: `/pages/order/moreOrder`
        },
      }
      const placeDetail = pathValMaps[placeType]
      if (placeType == 7) {
        const callbackUrl = '/shopIndex/shopIndex'
        if (!this.vuex_loginStatus) {
          uni.navigateTo({
            url: `/login/login/codeLogin?callbackUrl=${callbackUrl}`
          })
        }
      }
      if (!placeDetail) return
      if (placeDetail.url) uni.navigateTo({ url: placeDetail.url })
      if (placeDetail.src) {
        this.webSrc = placeDetail.src
      }
    },
    // 关闭遮盖弹窗
    handleCloseOverlay() {
      this.overlay.show = false
      this.overlay.list.shift()
      const hasOverlayList = this.overlay.list.length > 0 // 弹出层集合仍有剩余
      if (hasOverlayList) this.overlay.show = true
    },
    // 点击遮盖弹窗内容
    handleClickOverlay() {
      console.log('dianji222')
      this.swiperLinkExecutor(this.overlay.list[0], 'tankuang')
    },
    // 获取遮盖弹窗集合
    async getMoveBulletList() {
      const { accountType } = this.vuex_memberInfo ?? {}
      const { levelId } = this.vuex_memberLevelResp ?? {}
      const { warehouse_code } = this.vuex_nowAddress ?? {}
      const data = {
        accountType,
        showPort: 2, // 0 全部 1 app 2 小程序
        displayGroup: 0,
        memberLevel: levelId,
        warehouseId: warehouse_code
      }
      const res = await moveBulletListPage(data)
      this.overlay.list = [...res.data]
      if (this.overlay.list.length > 0) {
        this.overlay.show = this.vuex_first_enter_home
        uni.$u.vuex('vuex_first_enter_home', false);
      }
    }
  }
}
</script>
<style scoped lang="scss">
.topping{
  width: 70rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  position: fixed;
  font-size: 48rpx;
  top: calc(100vh - 250rpx);
  right: 50rpx;
  z-index: 99;
  overflow: hidden;
  box-shadow:0 0 10rpx 4rpx rgba(0,0,0,0.2);
  color: $uni-text-color;
  background: $uni-bg-color;
  border-radius: $uni-border-radius-circle;
}
.userview {
  height: 260rpx;
  width: 100%;
  position: absolute;
  z-index: 2;
  flex-direction: row;
  image{
    width: 100%;
    height: 100%;
  }
}
.category{
  width: 100%;
  padding: 24rpx 10rpx 14rpx 10rpx;
  box-sizing: border-box;
  margin-top: 24rpx;
  background: $uni-bg-color;
  border-radius: $uni-border-radius-default;
  .cateSmall {
    width: 15%;
    flex-shrink: 0;
    /* #ifdef MP-ALIPAY */
    width: 135rpx;
    /* #endif */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: $uni-border-radius-default;
    font-size: $uni-font-size-sm;
    .small {
      width: 44rpx !important;
      height: 44rpx !important;
    }
    view {
      width: 88rpx;
      height: 88rpx;
      margin-bottom: 5rpx;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      border-radius:$uni-border-radius-circle;
      background: $uni-f5bg-color;
      image {
        width: 88rpx;
        height: 88rpx;
      }
    }
  }
  .cateSmall:last-child{
    margin-right: 0rpx;
  }
}
.scroll-list {
  @include flex(column);
  &__goods-item {
    margin-right: 20px;
    &__image {
      width: 60px;
      height: 60px;
      border-radius: 4px;
    }
    &__text {
      color: #f56c6c;
      text-align: center;
      font-size: 12px;
      margin-top: 5px;
    }
  }
  &__show-more {
    background-color: #fff0f0;
    border-radius: 3px;
    padding: 3px 6px;
    @include flex(column);
    align-items: center;
    &__text {
      font-size: 12px;
      width: 12px;
      color: #f56c6c;
      line-height: 16px;
    }
  }
  &__line {
    @include flex;
    margin-top: 10px;
    &__item {
      &__image {
        width: 88rpx;
        height: 88rpx;
        border-radius: 50%;
      }
      &__text {
        margin-top: 5px;
        color: $u-content-color;
        font-size: 12px;
        text-align: center;
      }
      &--no-margin-right {
        margin-right: 0;
      }
    }
  }
}
.center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
}
.getTopFalse{
  width: 100%;
  height: 88rpx;
  display: block;
  margin-top: 14rpx;
}
.shopIndex {
  padding: 0rpx 32rpx;
  box-sizing: border-box;
  background:$uni-f5bg-color;
  padding-top: 78rpx;
  .top {
    width: 100%;
    height: 75rpx;
    display: flex;
    align-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    z-index: 3;
    padding: 0rpx 32rpx;
    background: transparent;
    box-sizing: border-box;
    .customer {
      width: 72rpx;
      height: 72rpx;
      overflow: hidden;
      text-align: center;
      justify-content:center;
      border-radius: $uni-border-radius-default;
      background: $uni-bg-color;
      .font_family{
        font-size: 48rpx;
      }
    }
    .search_wrap {
      width: 598rpx;
      height: 72rpx;
      box-sizing: border-box;
      border: 2rpx solid #FF5533;
      position: relative;
      display: flex;
      align-content: center;
      align-items: center;
      transform: rotateZ(360deg);
      overflow: hidden;
      border-radius: $uni-border-radius-default;
      background: $uni-bg-color;
      /deep/ input {
        display: block;
        width: 100%;
        height: 98%;
        padding-right: 64rpx;
        box-sizing: border-box;
        padding-left: 16rpx;
        margin-left: 56rpx;
        font-size: $uni-font-size-base;
      }
      image {
        width: 48rpx;
        height: 48rpx;
        position: absolute;
        left: 16rpx;
        top: 12rpx;
      }
      /deep/ .scan_icon {
        padding-right: 16rpx;
      }
    }
  }

  .banner {
    /deep/ .u-swiper{
      width: 686rpx;
      height: 280rpx;
      margin: 0 auto;
      margin-top: 24rpx;
    }
    /deep/.u-swiper-indicator__wrapper__dot {
      width: 16rpx;
      height: 16rpx;
    }
  }
  .titleBanner{
    width: 100%;
    margin-top: 24rpx;
    padding: 16rpx 16rpx 24rpx 16rpx;
    box-sizing: border-box;
    background: $uni-bg-color;
    border-radius: $uni-border-radius-default;
    image {
      width: 100%;
      height: 100%;
    }
    /deep/ .u-swiper {
      overflow: inherit;
    }
    /deep/ .u-swiper__indicator {
      bottom: -16rpx;
    }
    /deep/.u-swiper-indicator__wrapper__dot {
      width: 5px;
    }
  }
  .recomSwiper{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 16rpx;
    box-sizing: border-box;
    margin-top: 16rpx;
    background: $uni-bg-color;
    border-radius: $uni-border-radius-default;
    view {
      p {
        color:$uni-text-color;
        font-weight: bold;
        font-size: $uni-font-size-lg;
      }
      /deep/ .u-swiper{
        width: 318rpx;
        height: 196rpx;
        margin-top: 8rpx;
      }
      /deep/.u-swiper-indicator__wrapper__dot {
        width: 5px;
      }
    }
  }
  .special{
    margin-top: 24rpx;
    width: 100%;
    background: linear-gradient(180deg, rgba(202,233,249,1) 0%, rgba(202,233,249,0) 100%);
    padding: 16rpx;
    padding-bottom: 0rpx;
    box-sizing: border-box;
    border-radius: $uni-border-radius-default;
    .title{
      font-weight: bold;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      align-content: center;
      font-size: $uni-font-size-lg;
      .font_family{
        padding:2rpx;
        margin-left: 8rpx;
        font-size:$uni-font-size-lg;
        color: $uni-text-color-inverse;
        background-color: $uni-bg-color-orange;
        border-radius: $uni-border-radius-default;
      }
    }
    .speShop{
      width: 100%;
      overflow-x: auto;
      display: flex;
      justify-content: flex-start;
      .someStyle {
        margin-left: 16rpx;
        margin-top: 12rpx;
      }
      .someStyle:first-child {
        margin-left: 0rpx;
      }
    }
  }

  .newShop {
    margin-top: 24rpx;
    width: 100%;
    border-radius: $uni-border-radius-default;
    background: linear-gradient(180deg, rgba(251,220,220,1) 0%, rgba(249,202,210,0) 100%);
    padding: 16rpx;
    box-sizing: border-box;
    .title{
      font-size: $uni-font-size-lg;
      font-weight:bold;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      align-content: center;
      image {
        width: 62rpx;
        height: 32rpx;
        margin-left: 8rpx;
      }
    }
    .speShop{
      width: 100%;
      overflow-x: auto;
      display: flex;
      justify-content: flex-start;
      .someStyle {
        margin-left: 16rpx;
        margin-top: 12rpx;
      }
      .someStyle:first-child {
        margin-left: 0;
      }
    }
  }

  .bannerTile {
    width: 100%;
    margin-top: 24rpx;
    image {
      width: 100%;
      height: 100%;
    }
    /deep/ .u-swiper {
      overflow: inherit;
    }
    /deep/ .u-swiper__indicator {
      bottom: -24rpx;
    }
    /deep/.u-swiper-indicator__wrapper__dot {
      width: 5px;
    }
  }

  .allShop {
    width: 100%;
    padding-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: baseline;
    .smallShop {
      width: 334rpx;
      background:$uni-bg-color;
      padding-bottom: 24rpx;
      box-sizing: border-box;
      border-radius: $uni-border-radius-default;
      margin-top: 18rpx;
      overflow: hidden;
      .shopImg {
        width: 324rpx;
        height: 334rpx;
      }
      image {
        width: 324rpx;
        height: 334rpx;
      }
      .shopName {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        color:$uni-text-color;
        font-size: $uni-font-size-base;
        font-weight: 400;
        padding: 0rpx 24rpx;
        box-sizing: border-box;
        width: 100%;
        margin-top: 12rpx;
        line-height: 36rpx;
        min-height: 72rpx;
      }
      .price_row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 12rpx;
        padding: 0 24rpx;
        .shopPrice {
          display: flex;
          align-items: flex-end;
          align-content: flex-end;
          color: $uni-text-color-orange;
          font-size: $uni-font-size-sm;
          font-weight: 400;
          flex-shrink: 0;
          /* #ifdef MP-ALIPAY */
          position: relative;
          top: -10rpx;
          margin-top: 0rpx;
          /* #endif */
          span {
            color: $uni-text-color-orange;
            font-size: $uni-font-size-lg;
            font-weight: 700;
            position: relative;
            top: 4rpx;
            /* #ifdef MP-ALIPAY */
            top: 10rpx;
            /* #endif */
          }
        }
        .shop_cart {
          img {
            display: block;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }
}
.recommend_note {
  color: $uni-text-color-tips;
  padding-left: 24rpx;
  padding-right: 10rpx;
}

.scroll-list {
  width: 660rpx;
  .cateSmall {
    width: 20%;
  }
}

.banner_wrap {
  display: flex;
  justify-content: center;
  margin: 20rpx 0;
  image {
    width: 100%;
    height: 280rpx;
    border-radius: $uni-border-radius-base;
  }
}

.overlay-warp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  flex-direction: column;
  .overlay-img {
    width: 590rpx;
    height: 604rpx;
    border-radius: $uni-border-radius-default $uni-border-radius-default 0 0;
  }
}

.overlay-close {
  font-family:"xfs_iconfont" !important;
  font-size: 88rpx;
  color: $uni-text-color-tips;
  margin-top: 48rpx;
}
</style>
